<template>
	<view class="register">
		<view class="" style="border: 2rpx solid #fff;"></view>
		<view class="header">
			<image src="https://img0.baidu.com/it/u=1076867912,3911949475&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800"
				mode="widthFix"></image>
		</view>
		<view class="form">
			<u-form :model="form" ref="uForm" label-width="120" :error-type="errorType">
				<u-form-item label="角色">
					<u-radio-group v-model="form.permission" shape="square">
						<u-radio v-for="(item, index) in role" :key="item.name" :name="item.name">
							{{ item.label }}
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="用户名" prop="username">
					<u-input type="text" v-model="form.username" placeholder="请输入您的用户名" />
				</u-form-item>
				<u-form-item label="密码" prop="password">
					<u-input type="password" v-model="form.password" placeholder="请输入您的密码" />
				</u-form-item>
				<u-form-item label="真实姓名" prop="name">
					<u-input type="text" v-model="form.name" placeholder="请输入您的真实姓名" />
				</u-form-item>
				<u-form-item label="手机号码" prop="phone">
					<u-input type="number" v-model="form.phone" placeholder="请输入您的手机号码" />
				</u-form-item>
				<u-form-item label="邮箱" prop="email">
					<u-input type="text" v-model="form.email" placeholder="请输入您的邮箱" />
				</u-form-item>
				<u-form-item label="专业" v-if="form.permission==2">
					<u-input type="text" v-model="form.major" placeholder="请输入您的专业" />
				</u-form-item>
				<u-form-item label="学历" v-if="form.permission==2">
					<u-input type="text" v-model="form.education" placeholder="请输入您的学历" />
				</u-form-item>
				<u-form-item label="职称" v-if="form.permission==2">
					<u-input type="text" v-model="form.professional" placeholder="请输入您的职称" />
				</u-form-item>
				<u-form-item label="特长" v-if="form.permission==2">
					<u-input type="text" v-model="form.specialty" placeholder="请输入您的特长" />
				</u-form-item>
				<u-form-item label="工作年限" v-if="form.permission==2">
					<u-input type="text" v-model="form.work_year" placeholder="请输入您的工作年限" />
				</u-form-item>
				<u-form-item label="工作单位" v-if="form.permission==2">
					<u-input type="text" v-model="form.company" placeholder="请输入您的工作单位" />
				</u-form-item>
				<u-form-item v-if="form.permission==2" label="上传材料" prop="photo">
					<u-upload @on-change="uploadChange" :before-upload="beforeUpload" width="160" height="160"
						:action="action" :file-list="fileList" :form-data="formData">
					</u-upload>
				</u-form-item>
			</u-form>

			<view class="btn-reg">
				<u-button shape="circle" type="primary" :ripple="true" @click="submit">注册</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				errorType: ['message'], // 文字提示
				form: {
					username: '',
					password: '',
					permission: 0,
					name: '',
					phone: '',
					email: '',
					major: '',
					education: '',
					professional: '',
					specialty: '',
					work_year: '',
					company: '',
					materials_images: ''
				},
				rules: {
					username: [{
						required: true,
						message: '请填写您的用户名',
						trigger: ['blur'],
					}],
					password: [{
						required: true,
						message: '请填写您的密码',
						trigger: ['blur'],
					}, {
						min: 6,
						required: true,
						message: '密码不能少与6位数',
						trigger: ['change'],
					}],
					name: [{
						required: true,
						message: '请填写您的真实姓名',
						trigger: ['blur'],
					}],
					phone: [{
						required: true,
						message: '请填写您的手机号码',
						trigger: ['blur'],
					}, {
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['change', 'blur'],
					}],
					email: [{
						required: true,
						message: '请填写您的邮箱',
						trigger: ['blur'],
					}, {
						validator: (rule, value, callback) => {
							return this.$u.test.email(value);
						},
						message: '邮箱格式不正确',
						trigger: ['change', 'blur'],
					}],
				}, // 规则配置
				role: [{
						name: 0,
						label: '买家'
					},
					{
						name: 1,
						label: '卖家'
					},
					{
						name: 2,
						label: '专家'
					},
				],
				action: 'https://dc.huan-sha.net/api/upload/picture',
				fileList: [],
				formData: {
					picture: ''
				}, // 上传图片参数
			};
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (!valid) return
					this.$u.api.register(this.form).then(res => {
						uni.setStorageSync("username", this.form.username)
						uni.setStorageSync("password", this.form.password)
						uni.showToast({
							title: "注册成功",
							icon: "none"
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: -1
							})
						}, 1000)
					})
				})
			},
			// 图片上传后，无论成功或者失败都会触发
			uploadChange(res, index, lists, name) {
				console.log(res);
			},
			// 上传前的钩子
			beforeUpload(index, list) {
				this.formData.picture = list[index].file.path
				console.log(this.formData.picture);
			}
		},
		onHide() {
			// 缓存用户填写的数据
			getApp().globalData.regData = this.form
		},
		onShow() {
			// 数据反显
			this.form = getApp().globalData.regData
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
	}
</script>

<style lang="scss">
	.register {
		background-color: #f8f8f8;
		min-height: 100vh;

		.header {
			text-align: center;
			margin-top: 100rpx;

			image {
				width: 200rpx;
				border-radius: 20rpx;
			}
		}

		.form {
			margin-top: 40rpx;
			padding: 40rpx;

			.btn-reg {
				margin-top: 60rpx;
			}
		}
	}
</style>
